/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
const pObj = {
  status: "",
  channel_id: "",
  page: "1",
  per_page: "2"
};
let total_count = 0;

async function getArticle(){
  const data = await axios({
    url: "/v1_0/mp/articles",
    params: pObj
  });
  total_count = data.data.total_count;
  document.querySelector(".total-count").innerHTML = `共 ${total_count} 条`;
  
  const html = data.data.results.map(ele=>{
    return `<tr>
                <td>
                  <img src="${ele.cover.type===1?ele.cover.images[0]:`https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500`}" alt="">
                </td>
                <td>${ele.title}</td>
                <td>
                  ${ele.status===1?`<span class="badge text-bg-primary">待审核</span>`:`<span class="badge text-bg-success">审核通过</span>`}
                </td>
                <td>
                  <span>${ele.pubdate}</span>
                </td>
                <td>
                  <span>${ele.read_count}</span>
                </td>
                <td>
                  <span>${ele.comment_count}</span>
                </td>
                <td>
                  <span>${ele.like_count}</span>
                </td>
                <td data-id=${ele.id}>
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>`
  }).join("");
  document.querySelector(".art-list").innerHTML = html;
}
getArticle()


/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 * 
 */
async function getChannel(){
  const res = await axios({
    url: "/v1_0/channels"
  })
  const channels = res.data.channels;
  const html = channels.map(ele=>{
    return `<option value="${ele.id}">${ele.name}</option>`
  }).join("");
  document.querySelector(".form-select").innerHTML = `<option value="">请选择文章频道</option>`+ html
}
getChannel()


document.querySelectorAll(".form-check-input").forEach(ele=>{
  ele.addEventListener("change",function(e){
    pObj.status = e.target.value;
  })
})
document.querySelector(".form-select").addEventListener("change",function(e){
  pObj.channel_id = e.target.value;
})
document.querySelector(".sel-btn").addEventListener("click",function(){
  getArticle()
})

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector(".next").addEventListener("click",function(){
  if(pObj.page < Math.ceil(total_count / pObj.per_page)){
    pObj.page++;
    document.querySelector(".page-now").innerHTML = `第${pObj.page}页`;
    getArticle()
  }
})
document.querySelector(".last").addEventListener("click",function(){
  if(pObj.page > 1){
    pObj.page--;
    document.querySelector(".page-now").innerHTML = `第${pObj.page}页`;
    getArticle()
  }
})



/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
document.querySelector(".art-list").addEventListener("click",e => {
  if(e.target.classList.contains("del")){
    const id = e.target.parentNode.dataset.id;
    axios({
      url: `/v1_0/mp/articles/${id}`,
      method: "delete"
    }).then(()=>{
      const children = document.querySelector(".art-list").children;
      if(children.length === 1 && pObj.page !== 1){
        pObj.page--;
        document.querySelector(".page-now").innerHTML = `第${pObj.page}页`;
      }
      getArticle()
    }).catch(err=>{
      console.log(err);
      
    })
  }
})

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector(".art-list").addEventListener("click",function(e){
  if(e.target.classList.contains("edit")){
    const id = e.target.parentNode.dataset.id;
    location.href = `../publish/index.html?id=${id}`;
  }
})  

